<template>
    <el-dialog
        title="推荐排序"
        class="dialog-box"
        :visible.sync="showTypeDialog"
        width="800px">
        <div class="type-box" v-loading="dialogLoading && showTypeDialog">
            <div class="type-input">
                <div class="left-input">
                    <template v-if="editorTypeSort">
                        <el-button type="success" @click="saveTypeSort">保存排序</el-button>
                    </template>

                    <template v-else>
                        <el-select
                            @change="getRecommendList"
                            style="width:200px;"
                            v-model="type">
                            <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-select
                            @change="getRecommendList"
                            style="width:120px;margin-left:10px"
                            v-model="status">
                            <el-option label="全部" :value="null"></el-option>
                            <el-option label="展示中" :value="1"></el-option>
                            <el-option label="已暂停" :value="0"></el-option>
                        </el-select>
                        <el-button type="primary" style="margin-left:10px" @click="getTypeList">搜索</el-button>
                    </template>
                </div>

                <div class="right-input" v-if="typeList && typeList.length">
                    <el-button type="info" v-if="editorTypeSort" @click="cancleEditor">取消排序</el-button>
                    <el-button type="warning" v-else @click="editorType">编辑排序</el-button>
                </div>
            </div>

            <div class="type-title-box">
                <div class="title-item">ID</div>
                <div class="title-item" style="flex: 2;">推荐标题</div>
                <div class="title-item">排序</div>
                <div class="title-item">状态</div>
            </div>

            <div class="type-content-box" v-if="list && list.length">
                <template v-if="editorTypeSort">
                    <div class="type-content-item" v-for="(item, index) in currentList" v-dragging="{ item: item, list: currentList}" :key="index + '_sort'">
                        <div class="item-box">{{item.id}}</div>
                        <div class="item-box" style="flex: 2;">
                            <span>{{item.title}}</span>
                        </div>
                        <div class="item-box">{{index + 1}}</div>
                        <div class="item-box">
                            <span style="color:#67C23A;" v-if="item.status === 1">展示中</span>
                            <span style="color:red;" v-else>已暂停</span>
                        </div>
                    </div>
                </template>

                <template v-else>
                    <div class="type-content-item" :class="{'current-content-item': item._editor}" :id="'typeItem' + index" v-for="(item, index) in list" :key="index">
                        <div class="item-box">{{item.id}}</div>
                        <div class="item-box" style="flex: 2;">
                            <span>{{item.title}}</span>
                        </div>
                        <div class="item-box">{{index + 1}}</div>
                        <div class="item-box">
                            <span style="color:#67C23A;" v-if="item.status === 1">展示中</span>
                            <span style="color:red;" v-else>已暂停</span>
                        </div>
                    </div>
                </template>
            </div>

            <div class="type-no-data" v-else>暂无数据</div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            type: '',
            status: 1,
            showTypeDialog: false,
            dialogLoading: false, // 类型loading
            editorTypeSort: false, // 是否编辑排序
            typeList: [], // 类型列表
            list: [],
            currentList: [], // 临时缓存类型列表 用于拖拽排序
            inputValue: '', // 编辑类型名称
            editorItemIndex: -1 // 当前编辑的索引
        }
    },

    props: ['value'],

    created () {
        this.showTypeDialog = this.value
    },

    watch: {
        value (val) {
            this.showTypeDialog = val
        },

        showTypeDialog (val) {
            if (val) {
                this.getTypeList()
            } else {
                this.editorTypeSort = false
            }
            this.$emit('input', val)
        }
    },

    methods: {
        // 获取类型列表
        async getTypeList () {
            if (this.dialogLoading) return
            this.dialogLoading = true
            let params = {
                pageNum: 1,
                pageSize: 100
            }
            let res = await this.$http.get('/trade/selectActivityCategory', {
                params
            })
            if (res.code === '0' && res.data && res.data.list) {
                this.typeList = res.data.list
                this.type = this.typeList[0].id
                this.getRecommendList(this.type)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogLoading = false
        },

        // 获取推荐列表
        async getRecommendList (categoryId) {
            this.dialogLoading = true
            let res = await this.$http.get('/trade/selectActivityLoad', {
                params: {
                    pageNum: 1,
                    pageSize: 1000,
                    status: this.status,
                    categoryId
                }
            })
            if (res.code === '0') {
                this.list = res.data.sort((a, b) => {
                    return a.sort - b.sort
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.dialogLoading = false
        },

        // 开启排序
        editorType () {
            this.currentList = JSON.parse(JSON.stringify(this.list))
            this.editorTypeSort = true
        },

        // 取消排序
        cancleEditor () {
            this.editorTypeSort = false
        },

        // 保存排序
        async saveTypeSort () {
            this.dialogLoading = true
            let idList = []
            this.currentList.forEach(item => {
                idList.push(item.id)
            })
            let res = await this.$http.post('/trade/updateActivitySort', idList)
            if (res.code === '0') {
                this.list = this.currentList
                this.$message({
                    type: 'success',
                    message: '修改排序成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogLoading = false
            this.editorTypeSort = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .dialog-box {
        /deep/ .el-dialog__body {
            padding: 0 20px 20px;
        }

        .type-input {
            display: flex;
            justify-content: space-between;
        }

        .type-box {
            .type-title-box {
                border: 1px solid #EBEEF5;
                border-right: none;
                display: flex;
                margin-top: 16px;
                .title-item {
                    padding: 12px 10px;
                    flex: 1;
                    border-right: 1px solid #EBEEF5;
                    color: #909399;
                    font-size: 14px;
                    font-weight: 700;
                }
            }

            .type-content-box {
                height: 400px;
                overflow-y: scroll;
                .type-content-item {
                    display: flex;
                    border-left: 1px solid #EBEEF5;
                    border-bottom: 1px solid #EBEEF5;
                    &:hover {
                        background-color: #F5F7FA;
                    }
                    .item-box {
                        padding: 12px 10px;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        border-right: 1px solid #EBEEF5;
                    }
                }
                .current-content-item {
                    background-color: rgb(239, 245, 253);
                    &:hover {
                        background-color: rgb(239, 245, 253);
                    }
                }
            }

            .type-no-data {
                height: 100px;
                padding: 30px;
                text-align: center;
                border: 1px solid #EBEEF5;
                border-top: none;
            }
        }
    }
</style>
